@import "tailwindcss";
@plugin "daisyui" {
  themes:
    light --default,
    dark --prefersdark;
}

@layer components {
  .keyboard-hint-icon {
    color: #000;
  }

  html[data-theme="dark"] .keyboard-hint-icon,
  [data-theme="dark"] .keyboard-hint-icon {
    color: #fff;
  }

  svg.logo-svg .logo-wordmark {
    color: #000;
  }

  html[data-theme="dark"] svg.logo-svg .logo-wordmark,
  [data-theme="dark"] svg.logo-svg .logo-wordmark {
    color: #fff;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .keyboard-hint-icon {
      color: #fff;
    }

    :root:not([data-theme]) svg.logo-svg .logo-wordmark {
      color: #fff;
    }
  }

  .choices[data-type*="select-one"] .choices__button,
  .choices[data-type*="select-multiple"] .choices__button,
  .choices[data-type*="text"] .choices__button {
    background-image: var(--choices-icon-cross) !important;
  }
}

@layer base {
  :root {
    --choices-icon-cross: url("");
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --choices-icon-cross: url("");
    }
  }

  .highlight::highlight(search) {
    background-color: rgba(251, 191, 36, 0.45);
    color: inherit;
  }
}

@layer utilities {
  @keyframes fill {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

  .animate-fill-30 {
    animation: fill 30s linear forwards;
  }

  .animate-fill-20 {
    animation: fill 20s linear forwards;
  }

  .animate-fill-10 {
    animation: fill 10s linear forwards;
  }

  @keyframes shrink {
    0% {
      width: 100%;
    }
    100% {
      width: 0%;
    }
  }

  .animate-shrink-30 {
    animation: shrink 30s linear forwards;
  }

  .animate-shrink-20 {
    animation: shrink 20s linear forwards;
  }

  .animate-shrink-10 {
    animation: shrink 10s linear forwards;
  }
}

.animate-shrink-10:hover,
.animate-shrink-20:hover,
.animate-shrink-30:hover {
  animation-play-state: paused;
}

.input {
  &:focus,
  &:focus-within {
    outline-offset: 0;
  }
}

.textarea {
  &:focus,
  &:focus-within {
    outline-offset: 0;
  }
}

[x-cloak] {
  display: none !important;
}
